import { Row, Col, Switch, Tag, DatePicker, Tabs, Icon, Form, Input, TimePicker, Button, Tooltip, Spin, Popover, Modal } from 'antd';
import { WeaQrcode, WeaDialog, WeaBrowser, WeaNewScroll, WeaFormItem, WeaTab, WeaSearchGroup, WeaTools, WeaHelpfulTip } from 'ecCom';
import isEmpty from 'lodash/isEmpty';
import Collapse from "../../collapse.js"
import SignSiteInfo from './signSiteInfo'
import {WeaTableNew, WeaSwitch} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
const getKey = WeaTools.getKey;
let _this = null;
const { TableStore } = WeaTableNew;

import { inject, observer } from 'mobx-react';
import { observable, action, toJS } from 'mobx';
import Screen from '../../screen.js'
import * as screenApis from '../../../../apis/screen.js'
import * as API_LIST from '../../../../apis/dialog';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@inject('meetingDialog')
@observer
class TabSign extends React.Component {
	constructor(props) {
		super(props);
		_this = this;
		this.state = {
			// title: props.title ? props.title : '请输入标题',
			allSign: null,//签到人
			showScreen: false,
			showSignSet:false,
			spinning: false,
      visiblePopover:false,
      qrCode : '',
			qrcodeRefreshTime : 10,
			signStatusVisible: false,
			signSearchShow: false,
			previewSignInfoTitle: getLabel('510287','应到人员信息'),
		}
	}

	componentDidMount() {
		const {meetingId = '', meetingDialog} = this.props;
		//此处先初始化查看大屏签到的数据 fix：查看进入大屏签到和预览显示异常问题
    screenApis.getScreenSet({meetingid: meetingId}).then((result) => {
      meetingDialog.setScreenParams(result)
		})
		const { getQrCode, dialogStatus, getSignInfoCount, getSignInfoSearchCondition,getDefaultSignBackTime,getsignList } = this.props.meetingDialog;
		let { tabSign } = toJS(dialogStatus);
    tabSign && tabSign.qrcode && getQrCode({meetingid:meetingId}).then((result)=>{
		if(result.QrCode) result.QrCode = decodeURIComponent(result.QrCode)
      this.setState({qrCode:result.QrCode,qrcodeRefreshTime:result.qrcodeRefreshTime})
      if(result.dynamic){
        this.startSetInterval();
      }
		});
		getSignInfoCount({meetingid: dialogStatus.meetingId});
		getSignInfoSearchCondition();
		getDefaultSignBackTime();
		getsignList({meetingid: dialogStatus.meetingId},()=>{
			this.reFreshTable();
		});
  }
  
  startSetInterval = () => {
    const {meetingId = ''} = this.props;
    const { getQrCode } = this.props.meetingDialog
    //设置定时器
    this.interval = setInterval(() => {
      getQrCode({meetingid:meetingId}).then((result)=>{
		if(result.QrCode) result.QrCode = decodeURIComponent(result.QrCode)
        this.setState({qrCode:result.QrCode})
      })
    },this.state.qrcodeRefreshTime * 1000)
  }

  getQrCode = ()=>{
    const {meetingId = ''} = this.props;
    const { getQrCode } = this.props.meetingDialog
    //设置定时器
    getQrCode({meetingid:meetingId}).then((result)=>{
		if(result.QrCode) result.QrCode = decodeURIComponent(result.QrCode)
      this.setState({qrCode:result.QrCode})
    })
  }

  componentWillUnmount() {
    //组件卸载时一般清理一些状态
    //清除定时器，不知道是否生效
    clearInterval(this.interval);
  }
  
	shouldComponentUpdate(nextProps, nextState) {
		//组件渲染控制
		//return this.props.title !== nextProps.title
		return true;
	}
	componentWillReceiveProps(nextProps) {
		// if (this.props.showGroup !== nextProps.showGroup) {
		//     this.setState({showGroup: nextProps.showGroup});
		// }
	}

	handleVisibleChange = (visiblePopover, callback=false)=>{
		// const { visiblePopover } = this.state;
		
		!callback && this.setState({visiblePopover})
		callback && this.setState({visiblePopover}, callback)
	}

	
  getTabButtonsAd() {
		const { signSearchShow } = this.state;
		const { signStatus:{ form } } = this.props.meetingDialog;
    let btns=[
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zt6pot@doSearch`} type='primary' onClick={() => {this.onSearch()}}>{getLabel(197,'搜索')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rcuxm7@doReset`} type="ghost" onClick={() => { form.resetForm() }}>{getLabel(27088,'重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xf1hol@doCancel`} type="ghost" onClick={() => {this.setState({signSearchShow: !signSearchShow})}}>{getLabel(31129,'取消')}</Button>,
    ]
    return btns;
  }

	getSignType = (type) => {
		let typeToNum = '0';
		switch(type) {
			case "signCount" : typeToNum = '1'; break; 
			case "signedCount" : typeToNum = '2'; break; 
			case "notSignCount" : typeToNum = '4'; break; 
			case "signBackCount" : typeToNum = '5'; break; 
			case "signBackedCount" : typeToNum = '6'; break; 
			case "notSignBackCount" : typeToNum = '8'; break; 
			case "cdrs" : typeToNum = '3'; break; 
			case "ztrs" : typeToNum = '7'; break; 
		}
		return typeToNum;
	}

	getSearchs(){
    let { signStatus:{ form, conditionInfo, signType } } = this.props.meetingDialog;
		const { isFormInit } = form;
		let group = [];
    isFormInit && conditionInfo && conditionInfo.map((c, index) =>{
      let items = [];
      c.items.map(fields => {
        items.push({
          com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8xx5z3@${fields.domkey[0]}`}
            label={`${fields.label}`}
            labelCol={{span: `${fields.labelcol}`}}
            wrapperCol={{span: `${fields.fieldcol}`}}>
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@qo55cs@${fields.domkey[0]}`} fieldConfig={fields} form={form} onEnterSearch={() => {
							this.onSearch();
						}}/>
          </WeaFormItem>),
          colSpan:1
        })
			});
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@friejs@${index}`} needTigger={true} col={2} showGroup={true} items={items}/>)
    });
    return group;
	}

	getHelpfunTip = fields => {
    const domKey = getKey(fields);
    const helpTip = {
      'defaultAllowSignBackTime': getLabel('510318','输入0时，表示不限制签退时间。'),
      'defaultAllowSignTime': getLabel(514150,'输入0时，表示不限制签到时间。')
    }
    if (Object.keys(helpTip).indexOf(domKey) > -1)
      return <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@befsqb`} title={helpTip[domKey]} />
  }

	getSearchsLimitForm = () => {
    let { signStatus:{ limitForm, limitConditionInfo } } = this.props.meetingDialog;
		const { isFormInit } = limitForm;
		let group = [];
    isFormInit && limitConditionInfo && limitConditionInfo.map((c, index) =>{
      let items = [];
      c.items.map(fields => {
        items.push({
          com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@nv7xgb@${fields.domkey[0]}`}
						className='change-meeting-signTime'
            label={`${fields.label}`}
            labelCol={{span: `${fields.labelcol}`}}
            wrapperCol={{span: 18}}>
						{getKey(fields) == 'defaultAllowSignTime' && <span className='canchange'>{getLabel('514053','会议开始前')}</span>}
						{getKey(fields) == 'defaultAllowSignBackTime' && <span className='canchange'>{getLabel('509652','会议结束')}</span>}
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@sg846g@${fields.domkey[0]}`} fieldConfig={fields} form={limitForm}/>
						{getKey(fields) == 'defaultAllowSignTime' && <span className='canchange'>{getLabel('514054','分钟可以签到')}</span>}
						{getKey(fields) == 'defaultAllowSignBackTime' && <span className='canchange'>{getLabel('509653','分钟后不能签退')}</span>}
						{this.getHelpfunTip(fields)}
          </WeaFormItem>),
          colSpan:1
        })
			});
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@udyk0o@${index}`} needTigger={true} col={1} showGroup={true} items={items}/>)
    });
    return group;
	}
	
	onSearch = (v) => {
		const { onSearch, signStatus:{ form, signType }, getSignInfo, getTabSignTable, dialogStatus, getTabSignDetailTable  } = this.props.meetingDialog;
		let { tabSign, meetingId } = toJS(dialogStatus);
		let formparams = form.getFormParams();
		if (v) { // 普通搜索
			formparams = {
				qdr: v
			};
		}
		getSignInfo({...formparams, meetingid: meetingId, signType: signType}, (sessionkey) => getTabSignDetailTable(sessionkey));
		// form.resetForm();
		this.setState({ signSearchShow: false });
	}

	signStatusDialog = () => {
		const { signStatusVisible, signSearchShow, previewSignInfoTitle } = this.state;
		let { comsWeaTableStore, dialogStatus, signStatus, comsSignDetailWeaTableStore } = this.props.meetingDialog;
		let { tabSignTable, tabSignDetailTable} = toJS(dialogStatus);
		let { weaTableStore, form, conditionInfo } = toJS(signStatus);
		const buttons = [
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hph3i3@doClose`} style={{ display: 'inline-block' }} type="primary" onClick={() => { this.setState({signStatusVisible: false}, ()=>this.reFreshTable()); signStatus.form.updateFields&&signStatus.form.updateFields({qdr: ''}); }} >关闭</Button>,
		]
		return(
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ye3b7u`}
				title={previewSignInfoTitle}
				icon="icon-coms-meeting"
				iconBgcolor="#f14a2d"
				visible={signStatusVisible}
				onCancel={() => { this.setState({signStatusVisible: false, signSearchShow: false}); signStatus.form.updateFields&&signStatus.form.updateFields({qdr: ''}); }}
				buttons={buttons}
				style={{ width: '1200px', height: '400px' }}
				className="preview-sign-info"
				>
				<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@bp5gdo`} 
					searchType={['base', 'advanced']}
					showSearchAd={signSearchShow}
					searchsAd={this.getSearchs()}
					setShowSearchAd={()=>this.setState({signSearchShow: !signSearchShow})}
					buttonsAd={this.getTabButtonsAd({signSearchShow: false})}
					onSearch={(val)=>this.onSearch(val)}
					searchsBaseValue={signStatus.form.getFormParams&&signStatus.form.getFormParams&&signStatus.form.getFormParams().qdr || ''}
					onSearchChange={v => {
						signStatus.form.updateFields&&signStatus.form.updateFields({qdr: v})
					}}
					advanceHeight={165}
					hasMask={true}
					/>
				{comsSignDetailWeaTableStore[tabSignDetailTable] &&
					<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@r5dc4o`}
						hasOrder={true}
						needScroll={false}
						sessionkey={tabSignDetailTable}
						comsWeaTableStore={comsSignDetailWeaTableStore[tabSignDetailTable]}
						scroll={{y: 245}}
						getColumns={this.getColumns}
					/>}

			</WeaDialog>
		);
	}

	saveDefaultSignBackTime = () => {
		const { saveDefaultSignBackTime, signStatus:{ limitForm }, setSignStatus } = this.props.meetingDialog;
		limitForm.validateForm().then(f => {
			if (f.isValid) {
				saveDefaultSignBackTime(limitForm.getFormParams(), ()=>setSignStatus({limitDialogVisible: false}));
			} else {
				f.showErrors();
			}
		});
	}

	changSignoutLimitTime = () => {
    let { signStatus:{ limitForm, limitConditionInfo, limitDialogVisible }, setSignStatus } = this.props.meetingDialog;
		const buttons = [
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@z589pf@doSubmit`} style={{ display: 'inline-block' }} type="primary" onClick={() => {this.saveDefaultSignBackTime()}} >{getLabel(382958,'确定')}</Button>,
		];
		return(
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ug2vqv`}
				title={getLabel('514149','设置签到/签退时间') }
				icon="icon-coms-meeting"
				iconBgcolor="#f14a2d"
				visible={limitDialogVisible}
				onCancel={() => { setSignStatus({limitDialogVisible: false}) }}
				buttons={buttons}
				style={{ width: '600px', height: '150px', paddingTop: '40px' }}
			>
				<div style={{ paddingTop: '20px', paddingLeft: '40px' }}>
					{this.getSearchsLimitForm()} 
				</div>
			</WeaDialog>
		)
	}

	onClickA = (type) => {
		let { dialogStatus, getTabSignTable, getTabSignDetailTable, getSignInfo, setSignStatus, signStatus:{ form } } = this.props.meetingDialog;
		let { tabSign, meetingId } = toJS(dialogStatus);
		let title = '';
		if (type === 'signCount') {
			title = getLabel('510287','应到人员信息');
		} else if (type === 'signedCount') {
			title = getLabel('510290','已签到人员信息');
		} else if (type === 'notSignCount') {
			title = getLabel('510291','未签到人员信息');
		} else if (type === 'signBackCount') {
			title = getLabel('510292','应签退人员信息');
		} else if (type === 'signBackedCount') {
			title = getLabel('510293','已签退人员信息');
		} else if (type === 'notSignBackCount') {
			title = getLabel('510295','未签退人员信息') ;
		}	else if (type === 'cdrs') {
			title = getLabel('510296','迟到人员信息');
		}	else if (type === 'ztrs') {
			title = getLabel('510297','早退人员信息') ;
		}
		setSignStatus({ signType: type });
		form.updateFields({ signedtype: this.getSignType(type)});
		getSignInfo({meetingid: meetingId, signType: type}, (sessionkey) => getTabSignDetailTable(sessionkey));
		this.setState({signStatusVisible: true, previewSignInfoTitle: title})
	}

	splitString = (label, num) => {
		if (typeof label === 'string') {
			return label.replace('${num}', num);
		} else {
			return label;
		}
	}

	render() {
		const { showScreen, spinning, allSign ,showSignSet} = this.state;
		const { meetingId } = this.props;
		let { dialogStatus, exportExcel, changeTabSignTab, comsWeaTableStore, signMeetingByHand, signDataStatistic, getSignInfoCount, signInfoStatus } = this.props.meetingDialog;
		let { tabSign, tabSignTable, tabSignTab, conditions } = toJS(dialogStatus);
		const { signInfoVisible } = signInfoStatus
		let { allMember, signCount, notSignCount, signBackCount, notSignBackCount, ztrs, cdrs,allowSignBack } = signDataStatistic;
		let uploadCfg = {};
		
		conditions[meetingId] && conditions[meetingId].forEach((record, index) => {
      record && record.items && record.items.forEach((_record, _index) => {
				if (_record.domkey[0] == "accessorys") {
					uploadCfg = _record.cfg
				}
			})
		})
		const buttons = [
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tmfmfd@doSave`} key="save" type="primary" size="large"
				onClick={() => {
					if(this.state.allSign){
						let arr = [];
						let str = '';
						this.state.allSign.forEach((element) => {
							arr.push(element['id']);
						})
						str = arr.join(",");//3,4,5
						let objparam = {};
						objparam.userid = str;
						//现在二维码都是根据后端传递整个url，所以确认ticket需要重新计算
						let qrticketArr = tabSign.qrcode.split('meetingid=')
						let qrticket = qrticketArr[1];
						qrticket = qrticket.split('&')[0]
						objparam.qrticket = qrticket;
						objparam.meetingid = meetingId;
						signMeetingByHand(objparam, () => {getSignInfoCount({meetingid: meetingId});this.state.allSign = null;});
					}else{
						Modal.warning({
							title: `${getLabel(127354,'警告')}`,
							content: `${getLabel('383779','必要信息不完整')}`,
						});
						return
					}

				}}
			> {getLabel(383323,"保存")}
      </Button>,
		];
		const showScreenButtons = [
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@f64258@screenPreview`} style={{ display: 'inline-block' }} type="primary" onClick={() => { this.screenPreview() }} >{getLabel(131013,"预览")}</Button>,
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kokmso@save`} style={{ display: 'inline-block' }} type="primary" onClick={() => { this.save() }} >{getLabel(383323,"保存")}</Button>,
		]

		const showSignSetButtons = [
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4uiv9z@saveSign`} style={{ display: 'inline-block' }} type="primary" onClick={() => { this.saveSign() }} >{getLabel(383323,"保存")}</Button>,
		]

		const iconStyle = {
			display: 'inline-block',
			color: '#58A0F8',
			fontSize: '16px',
			paddingRight: '8px',
			cursor: 'pointer'
		};
		const contentStyle = {
			height:'25px',
			lineHeight:'25px',
			cursor:'pointer',

		}
		const contentSpanStyle = {
			display:'inline-block',
			width:'120px',
    }
		let content = (
			!tabSign.dynamicQrcode?<div className = "meetingTabsign-popContent">
				<div style = {contentStyle} onClick={()=>this.contentClick(1)}>
					<span style={contentSpanStyle}>240*240px</span><span className="icon-coms-download" />
				</div>
				<div style = {contentStyle} onClick={()=>this.contentClick(2)}>
					<span style={contentSpanStyle}>480*480px</span><span className="icon-coms-download" />
				</div>
				<div style = {contentStyle} onClick={()=>this.contentClick(3)}>
					<span style={contentSpanStyle}>960*960px</span><span className="icon-coms-download" />
				</div>
			</div>
      :
      ''
		);
		return (
			<div className="preview-tabsign">
				{
					tabSign && tabSign.qrcode == '' ? '' :
						<Collapse ecId={`${this && this.props && this.props.ecId || ''}_Collapse@tqr081`}
							title={getLabel('129712','会议二维码')}
							showGroup={true}
							childrenStyle={{ textAlign: 'center', marginTop: '10px' }}
							customIcon={
								<span style={{ display: 'inline-block' }}>
									<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@8mo8h9`} placement="bottom" title={getLabel(383580,"大屏签到")}><span className="icon-coms-Big-screen-sign" style={iconStyle} onClick={() => { this.preview() }} /></Tooltip>
									<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@tsbkou`} placement="bottom" title={getLabel(383582,"大屏设置")}><span className="icon-coms-BatchEditing-Hot" style={iconStyle} onClick={() => { this.screenSet() }} /></Tooltip>
									<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@bcsupe`} placement="bottom" title={getLabel(520821,"会议签到/签退设置")}><span className="icon-coms-currency" style={iconStyle} onClick={() => { this.signSet() }} /></Tooltip>
								</span>
							}
						>
            {tabSign.dynamicQrcode?<div title={getLabel(390797,"点击刷新")} style={{ display: 'inline-block', cursor: 'pointer' }} onClick={this.getQrCode}>
									<WeaQrcode ecId={`${this && this.props && this.props.ecId || ''}_WeaQrcode@xelfr5`} size={118} level={"M"} text={`${this.state.qrCode}`} />
                </div>
                :
                <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@szlkcj`} placement="rightTop" title={<span>{getLabel(383583,"选择下载尺寸：")}</span>} content={content} trigger="click"
							visible={this.state.visiblePopover} onVisibleChange={this.handleVisibleChange}>
								<div title={getLabel(125264,"点击下载")} style={{ display: 'inline-block', cursor: 'pointer' }}>
									<WeaQrcode ecId={`${this && this.props && this.props.ecId || ''}_WeaQrcode@9c5dfo`} size={118} level={"M"} text={`${this.state.qrCode}`} />
								</div>
              </Popover>
            }
							
							<span style={{ display: 'block' }}>{getLabel('510305','使用Emobile【扫一扫】功能扫描二维码即可签到或签退')}</span>
							<div className={'sign-status'}>
								<div style={{ display: 'inline-block', textAlign: 'left' }}>
									<span style={{display: 'block', marginTop: 15}}>
										<label>{getLabel('510306','签到情况：') }</label>
										<a onClick={()=> this.onClickA('signCount')}>{`${this.splitString(getLabel('510307','应签到${num}人') , allMember)}, `}</a> 
										<a onClick={()=> this.onClickA('signedCount')}>{`${this.splitString(getLabel('510308','已签到${num}人'), signCount)}, `}</a> 
										<a onClick={()=> this.onClickA('cdrs')}>{`${this.splitString(getLabel('510309','迟到${num}人') , cdrs)}, `}</a> 
										<a onClick={()=> this.onClickA('notSignCount')}>{`${this.splitString(getLabel('510310','未签到${num}人'), notSignCount)}, `}</a>
									</span>
									{(allowSignBack == '1') &&<span style={{display: 'block', marginTop: 10}}>
										<label>{getLabel('510313','签退情况：')}</label>
										<a onClick={()=> this.onClickA('signBackCount')}>{`${this.splitString(getLabel('510314','应签退${num}人'), signCount)}, `}</a> 
										<a onClick={()=> this.onClickA('signBackedCount')}>{`${this.splitString(getLabel('510315','已签退${num}人') , signBackCount)}, `}</a> 
										<a onClick={()=> this.onClickA('ztrs')}>{`${this.splitString(getLabel('510316','早退${num}人') , ztrs)}, `}</a> 
										<a onClick={()=> this.onClickA('notSignBackCount')}>{`${this.splitString(getLabel('510317','未签退${num}人'), signCount-signBackCount)}, `}</a>
									</span>}
								</div>
							</div>
						</Collapse>
				}

				<Collapse ecId={`${this && this.props && this.props.ecId || ''}_Collapse@q6epl5`}
					title={getLabel('510300','签到/签退记录') }
					showGroup={true}
					customIcon={
						<span style={{ display: 'inline-block' }}>
            {tabSign.qrcode == '' ? '' : <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@8r0u8e`} placement="bottom" title={getLabel(354,"刷新")}><span className="icon-coms-Refresh" style={iconStyle} onClick={() => { this.reFreshTable() }} /></Tooltip>}
							{tabSign.qrcode == '' ? '' : <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@xqnpsa`} placement="bottom" title={getLabel(383586,"导出")}><span className="icon-coms-download" style={iconStyle} onClick={() => { exportExcel(meetingId) }} /></Tooltip>}
							{tabSign.qrcode == '' ? '' : <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@n9nkbb`} placement="bottom" title={getLabel('510301','添加签到/签退')}><span className="icon-coms-Add-to-hot" style={iconStyle} onClick={() => { changeTabSignTab(true) }} /></Tooltip>}
						</span>
					}
				>
					{comsWeaTableStore[tabSignTable] &&
					<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@bsmyiw`}
						hasOrder={true}
						needScroll={false}
						sessionkey={tabSignTable}
						getColumns={this.getColumns}
						onOperatesClick={this.onOperatesClick2}
						comsWeaTableStore={comsWeaTableStore[tabSignTable]}
					/>}
				</Collapse>

				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1hsyue`}
					visible={tabSignTab}
					title={getLabel('510302','添加会议签到/签退记录')}
					className="weadialog-tabsign"
					icon="icon-coms-meeting"
					iconBgcolor="#f14a2d"
					buttons={buttons}
					style={{ width: '600px', height: '200px' }}
					onCancel={() => { changeTabSignTab(false) }}
				>
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@viyjjp`} style={{ paddingTop: '80px' }}>
						<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4i2m2b`} span={8} style={{ textAlign: "center", height: '30px' }}>
							<span style={{ display: 'inline-block', lineHeight: '30px' }}>{`${getLabel(125530,"签到人")}:`}</span>
						</Col>
						<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yfehwt`} span={16}>
							<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@izxxej`}
								hasAddBtn={false}
								hasAdvanceSerach={true}
								isAutoComplete={1}
								isDetail={0}
								isMultCheckbox={false}
								isSingle={false}
								linkUrl="/hrm/resource/HrmResource.jsp?id="
								quickSearchName=""
								title={getLabel(839,"多人力资源")}
								type="17"
								viewAttr={3}
								replaceDatas={allSign}
								onChange={this.testonChange}
								inputStyle={{ width: '250px' }}
							/>
						</Col>
					</Row>
				</WeaDialog>

				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@rc7eza`}
					visible={showScreen}
					title={getLabel(383582,"大屏设置")}
					className="weadialog-tabsign-screen"
					icon="icon-coms-meeting"
					iconBgcolor="#f14a2d"
					buttons={showScreenButtons}
					style={{ width: '600px', height: '400px' }}
					onCancel={() => { this.setState({ showScreen: false }) }}
				>
					<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@eeulg0`} height={'100%'}>
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@7n553j`} spinning={spinning} >
              <Screen ecId={`${this && this.props && this.props.ecId || ''}_Screen@kw6qg3`}
                meetingid={meetingId}
                showScreen={showScreen}
							/>
            </Spin>
					</WeaNewScroll>
				</WeaDialog>

				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@qspkd6`}
					visible={showSignSet}
					title={getLabel(520821,"会议签到/签退设置")}
					className="weadialog-tabsign-screen"
					icon="icon-coms-meeting"
					iconBgcolor="#f14a2d"
					buttons={showSignSetButtons}
					style={{ width: '600px', height: '400px' }}
					onCancel={() => { this.setState({ showSignSet: false }) }}
				>
					<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@e89f8z`} height={'100%'}>
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@k4is4b`} spinning={spinning} >
              <Screen ecId={`${this && this.props && this.props.ecId || ''}_Screen@eg0h10`}
                meetingid={meetingId}
                showScreen={showSignSet}
							/>
            </Spin>
					</WeaNewScroll>
				</WeaDialog>

				<SignSiteInfo ecId={`${this && this.props && this.props.ecId || ''}_SignSiteInfo@peefvn`} visible={signInfoVisible}/>
				
				{this.signStatusDialog()}
				{this.changSignoutLimitTime()}
			</div>
		)
	}

	getColumns = (columns )=>{
		return columns.map(col => {
			let newColumn = { ...col };
      if (col.dataIndex == "signTime") {
        return {
          ...col,
          render: (text, record, index) => {
						// 前端元素转义
						const valueSpan =
						record[`${newColumn.dataIndex}span`] !== undefined
							? record[`${newColumn.dataIndex}span`]
							: record[newColumn.dataIndex];
            return (
             record.signTime?<span>
									<a  style={{cursor: 'pointer'}} 
											onClick={()=>{
												this.openSignInfo(record.id)
											}}
											dangerouslySetInnerHTML={{__html: valueSpan}}
									/>
              </span>:<span dangerouslySetInnerHTML={{__html: valueSpan}}></span>
            );
          }
        };
			}
			if (col.dataIndex == "signBackTime") {
        return {
          ...col,
          render: (text, record, index) => {
						// 前端元素转义
						const valueSpan =
						record[`${newColumn.dataIndex}span`] !== undefined
							? record[`${newColumn.dataIndex}span`]
							: record[newColumn.dataIndex];
            return (
            record.signBackTime?<span>
									<a  style={{cursor: 'pointer'}} 
											onClick={()=>{
												this.openSignInfo(record.id)
											}}
											dangerouslySetInnerHTML={{__html: valueSpan}}
									/>
              </span>:<span dangerouslySetInnerHTML={{__html: valueSpan}}></span>
            );
          }
        };
      }
      return col;
    });

	}
	openSignInfo = (signId)=>{
			const {dialogStatus,openSignInfo}=this.props.meetingDialog
			const {meetingId} = dialogStatus
			openSignInfo({meetingid:meetingId,signId:signId})
	}
	contentClick = (size)=>{
		const { meetingId } = this.props;
		let params = {
			meetingid:meetingId,
			size,
		}
		let { downLoadQrCode } = this.props.meetingDialog;
		this.handleVisibleChange(false, ()=>{downLoadQrCode(params);})
	}

  screenSet = () => {
		const {dialogStatus}=this.props.meetingDialog
		dialogStatus.isScreenShow = true;
		dialogStatus.isSignSetShow = false;
		this.setState({showScreen: true});
	}

	signSet = () => {
		const {dialogStatus}=this.props.meetingDialog
		this.setState({showSignSet: true});
		dialogStatus.isScreenShow = false;
		dialogStatus.isSignSetShow = true;
		}

  screenPreview = () => {
		const {meetingDialog, meetingId} = this.props;
		const screenParams = toJS(meetingDialog.screenParams);
    // screenApis.saveScreenSet({...screenParams, meetingid: meetingId}).then(() => {
		// 	window.open(`/spa/meeting/static/index.html#/main/meeting/screen/${meetingId}`)
		// })

		let bgcolor = screenParams.bgcolor && screenParams.bgcolor.replace("#", "");
		let fontcolor = screenParams.fontcolor && screenParams.fontcolor.replace("#", "");
		window.open(`/spa/meeting/static/index.html#/main/meeting/screen/${meetingId}
		?type=view&bgcolor=${bgcolor}&fontcolor=${fontcolor}&showdep=${screenParams.showdep}&showhead=${screenParams.showhead}
		&shownum=${screenParams.shownum}&showsub=${screenParams.showsub}&fontsize=${screenParams.fontsize}&bgimg=${screenParams.bgimg}&showtitle=${screenParams.showtitle}`)

	}

  preview = () => {
		const { meetingId = '' } = this.props;
    window.open(`/spa/meeting/static/index.html#/main/meeting/screen/${meetingId}`)
  }

	save = () => {
		const { meetingDialog,meetingId } = this.props;
		let {dialogStatus} = meetingDialog;
		// let params = this.refs.meetingScreen && this.refs.meetingScreen.returnState();
		// params = { ...params, meetingid: meetingId }
		this.setState({ spinning: true })
    const screenParams = toJS(this.props.meetingDialog.screenParams);
    screenApis.saveScreenSet({...screenParams, meetingid: meetingId}).then(() => {
			this.setState({ showScreen: false, spinning: false })
		})
		
	}

	saveSign = () => {
		const {meetingDialog, meetingId } = this.props;
		// let params = this.refs.meetingScreen && this.refs.meetingScreen.returnState();
		// params = { ...params, meetingid: meetingId }
		this.setState({ spinning: true })
		let { signDataStatistic ,setState,comsWeaTableStore,dialogStatus,getsignList} = this.props.meetingDialog;
		const screenParams = toJS(this.props.meetingDialog.screenParams);

		screenApis.saveScreenSet({...screenParams, meetingid: meetingId}).then(() => {
			this.setState({ showSignSet: false, spinning: false });
			setState({signDataStatistic:{...signDataStatistic,allowSignBack:screenParams.allowSignBack}})
			getsignList({meetingid: meetingId},()=>{
				this.reFreshTable();
			});
		})
	}

	testonChange = (ids, names, datas) => {
		this.setState({
			allSign: datas,
		});
	}

	onOperatesClick2 = (record, index, operate, flag) => {
		
		const { meetingId } = this.props;
		let { delSign, signMeetingByHandOne, signBackMeetingByHandOne } = this.props.meetingDialog;
	
		if (flag == 0) {//清空
			delSign({
				id: record.id,
				meetingid: meetingId,
			}, () => this.reFreshTable())
		}
		if (flag == 1) {//补录
			signMeetingByHandOne({
				id: record.id,
				meetingid: meetingId,
			}, () => this.reFreshTable())
		}
		if (flag == 2) {//补录签退时间
			signBackMeetingByHandOne({
				id: record.id,
				meetingid: meetingId,
			}, () => this.reFreshTable())
		}
  }
  
  reFreshTable = ()=>{
    let { dialogStatus, getTabSignTable, getSignInfoCount,getSignList } = this.props.meetingDialog;
		let { tabSign } = toJS(dialogStatus);
		const { meetingId } = this.props;
		getSignInfoCount({meetingid: meetingId});
		//getSignList({meetingid: meetingId})
		getTabSignTable(tabSign);
  }

}

export default TabSign




